<template>
    <div class="file-list">
        <slot></slot>
        
        <file-item
            v-for="(item, index) in dataList"
            :key="index"
            :data="item"
            :action="action"
            @del="$emit('del', {data: $event, index})"
            :size="size"
            :btn-layout="btnLayout"
        ></file-item>

        <el-button 
        v-if="isOverLimit"
        icon="el-icon-arrow-right" 
        type="text" 
        @click="openHandler"
        >
            展开
        </el-button>

        <div 
        class="empty" 
        v-if="readonly && !dataList.length"
        >
            无附件
        </div>
    </div>
</template>

<script>
import FileItem from './file-preivew-item';

const DEFALUT_LENGTH = 4;

export default {
    components: {
        FileItem,
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        action: {
            type: Object,
            default: () => ({}),
        },
        size: {
            type: [String,Number],
            default: 178,
        },
        btnLayout: {
            type: String,
            default: ''
        },
    },
    inject: ['readonly'],
    data() {
        return {
            openController: false,
        };
    },
    computed: {
        dataList() {
            if (
                this.isOverLimit
            ) {
                return this.data.slice(0, DEFALUT_LENGTH);
            }

            return this.data;
        },
        isOverLimit() {
            return (
                this.readonly 
                && this.data 
                && this.data.length > DEFALUT_LENGTH 
                && !this.openController
            );
        },
    },
    methods: {
        openHandler() {
            this.openController = true;
        },
    },
};
</script>

<style lang="scss" scoped>
    .file-list{
        overflow: hidden;
        margin-left: 10px;
        max-width: 100%;

        .empty{
            color: #C0C4CC;
            line-height: 33px;
        }
    }
</style>